<style type="text/css">

    .layui-form-pane .layui-form-checkbox {
        margin: 0px;
    }

    table {
        margin: 0;
    }
</style>


<script type="text/javascript">
    var form;
    layui.use(['element', 'form', 'layer', 'table'], function () {
        var element = layui.element,
            layer = layui.layer,
            table = layui.table;
        form = layui.form;
        form.render();
        //第一个实例
        table.render({
            elem: '#roleListData'
            , url: '/structure/listUserByStructure' //数据接口
            , even: true
            , skin: 'row'
            , id: 'roleListData'
            , cols: [[ //表头
                {type: 'numbers'}
                , {field: 'id', title: 'ID', width: 80, sort: true}
                , {field: 'username', title: '用户名', width: 80}
                , {field: 'sex', title: '性别', width: 80, sort: true}
                , {field: 'sign', title: '签名', width: 177}
                , {field: 'experience', title: '积分', width: 80, sort: true}
                , {field: 'score', title: '评分', width: 80, sort: true}
            ]]
            , page: true //开启分页
        });
        //第一个实例
        table.render({
            elem: '#userListData'
            , url: '/structure/listUserByStructure' //数据接口
            , even: true
            , skin: 'row'
            , id: 'userListData'
            , cols: [[ //表头
                {type: 'numbers'}
                , {field: 'id', title: 'ID', width: 80, sort: true}
                , {field: 'username', title: '用户名', width: 80}
                , {field: 'sex', title: '性别', width: 80, sort: true}
                , {field: 'sign', title: '签名', width: 177}
                , {field: 'experience', title: '积分', width: 80, sort: true}
                , {field: 'score', title: '评分', width: 80, sort: true}
            ]]
            , page: true //开启分页
        });
    })
    $(function () {
       layout.initLayout("#tollData",{fit: true})
       layout.initLayout("#leftLayout",{fit: true})

        var editRowId;
        $('#stree2').treegrid({
            url: '/structure/resourceTree',
            idField: 'id',//设置主键
            treeField: 'name',//设置显示树的字段
            fitColumns: true,//自适应宽度
            checkOnSelect: false,//如果为true，当用户点击行的时候该复选框就会被选中或取消选中。如果为false，当用户仅在点击该复选框的时候才会呗选中或取消。
            selectOnCheck: false,//如果为true，单击复选框将永远选择行。如果为false，选择行将不选中复选框。
            rownumbers: false,//显示行号
            onlyLeafCheck: true,//定义是否仅在叶子节点前显示复选框
            animate: true,//展开关闭时是否有动画效果
            fit: true,//自适应父容器
            autoRowHeight: false,
            cascadeCheck: false,
            nowrap: false,
            columns: [[
                {field: 'id', checkbox: true},
                {field: 'name', title: '资源', width: 100},
                {
                    field: 'resource', title: '权限', width: 200,
                    formatter: function (value, row, index) {
                        value = `<form class="layui-form layui-form-pane" action="">
                                <div class="layui-input-block">
                                <input type="checkbox" name="like1[write]" lay-skin="primary" title="写作" checked=""/>
                                <input type="checkbox" name="like1[read]" lay-skin="primary" title="阅读"/>
                                <input type="checkbox" name="like1[game]" lay-skin="primary" title="游戏"/>
                                </div></form>`;
                        return value;
                    }
                }
            ]],
            //加载成功后启动拖拽功能
            onLoadSuccess: function (row,data) {
                form.render();
                active['checkboxChange'].call($(this),$(this));
                $(this).treegrid('resize',{width:'100%',height:'100%'});
            }
        });
    })
</script>

<div id="tollData" class="xy-layout">
    <div class="xy-layout-west" data-options="split:true,border:false,minWidth:500,width:'50%'">
        <div id="leftLayout" class="xy-layout">
            <div class="xy-layout-center" data-options="border:false" >
                <div class="layui-colla-item">
                    <div class="layui-colla-title">
                        <div class="xy-toolbar">
                            <div class="xy-toolbar-btn">角色列表</div>
                            <div class="xy-toolbar-search">
                                <div class="layui-input-inline">
                                    <input type="text" name="name" placeholder="支持模糊查询.." autocomplete="off"
                                           class="layui-input"/>
                                </div>
                                <button lay-filter="search" class="layui-btn layui-btn-sm" data-type="search">
                                    <i class="layui-icon">&#xe615;</i>查询
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="layui-colla-content layui-show xy-table">
                        <table class="layui-hide" lay-filter="rld" id="roleListData"></table>
                    </div>
                </div>
            </div>
            <div class="xy-layout-south" data-options="border:false,height:'50%'">
                <div class="layui-colla-item">
                    <div class="layui-colla-title">
                        <div class="xy-toolbar">
                            <div class="xy-toolbar-btn">用户列表</div>
                            <div class="xy-toolbar-search">
                                <div class="layui-input-inline">
                                    <input type="text" name="name" placeholder="支持模糊查询.." autocomplete="off"
                                           class="layui-input"/>
                                </div>
                                <button lay-filter="search" class="layui-btn layui-btn-sm" data-type="search">
                                    <i class="layui-icon">&#xe615;</i>查询
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="layui-colla-content layui-show xy-table">
                        <table class="layui-hide" lay-filter="uld" id="userListData"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="xy-layout-center" data-options="minWidth:500,border:false">
        <div class="layui-colla-item">
            <!--标题-->
            <div class="layui-colla-title">
                <div class="xy-toolbar">
                    <div class="xy-toolbar-btn">
                        <button class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe605;</i>全部选择</button>
                        <button class="layui-btn layui-btn-sm"><i class="layui-icon">&#x1006;</i>全部不选</button>
                    </div>
                    <div class="xy-toolbar-search">
                        <form class="layui-form" action="">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <div class="layui-input-inline">
                                        <select name="modules" lay-verify="required" lay-search="">
                                            <option value="">直接选择或搜索选择</option>
                                            <option value="1">layer</option>
                                            <option value="2">form</option>
                                            <option value="3">layim</option>
                                            <option value="4">element</option>
                                            <option value="5">laytpl</option>
                                            <option value="6">upload</option>
                                            <option value="7">laydate</option>
                                            <option value="8">laypage</option>
                                            <option value="9">flow</option>
                                            <option value="10">util</option>
                                            <option value="11">code</option>
                                            <option value="12">tree</option>
                                            <option value="13">layedit</option>
                                            <option value="14">nav</option>
                                            <option value="15">tab</option>
                                            <option value="16">table</option>
                                            <option value="17">select</option>
                                            <option value="18">checkbox</option>
                                            <option value="19">switch</option>
                                            <option value="20">radio</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
            <!--左边-->
            <div class="layui-colla-content layui-show xy-table">
                <table id="stree2"></table>
            </div>
        </div>
    </div>
</div>